import { useKeyPress } from 'ahooks'
import Konva from 'konva'
import React, { useState } from 'react'
import { Group, Layer, Rect, Stage, Transformer } from 'react-konva'
import { useShapeSelection } from './useShapeSelection'
import { useShapeTransformer } from './useShapeTransformer'

const INIT_SHAPES = [
  {
    id: 'rect',
    type: 'Rect',
    fill: 'red',
    width: 100,
    height: 100,
    x: 100,
    y: 100,
    scaleX: 1,
    scaleY: 1,
    skewX: 0,
    skewY: 0,
    rotation: 0
  },
  {
    id: 'circle',
    type: 'Circle',
    fill: 'blue',
    radius: 50,
    x: 300,
    y: 100,
    scaleX: 1,
    scaleY: 1,
    skewX: 0,
    skewY: 0,
    rotation: 0
  },
  {
    id: 'star',
    type: 'Star',
    fill: 'yellow',
    numPoints: 5,
    innerRadius: 30,
    outerRadius: 70,
    x: 200,
    y: 100,
    scaleX: 1,
    scaleY: 1,
    skewX: 0,
    skewY: 0,
    rotation: 0
  }
]

export default function View() {
  const [shapes, setShapes] = useState(INIT_SHAPES)

  // 使用自定义Hook处理选择逻辑
  const { selectedIds, handleShapeClick, handleStageClick } = useShapeSelection()

  // 使用自定义Hook处理变换逻辑
  const {
    transformerMode,
    stageRef,
    layerRef,
    groupRef,
    transformerRef,
    enableTransformerMode,
    confirmTransform,
    cancelTransform,
    handleGroupDragStart,
    handleTransformEnd,
    handleShapeDragEnd
  } = useShapeTransformer(shapes, setShapes, selectedIds)

  // 快捷键绑定
  useKeyPress(['ctrl.alt.t'], enableTransformerMode)
  useKeyPress(['enter'], confirmTransform)
  useKeyPress(['esc'], cancelTransform)

  const shapesElements = () => {
    return shapes.map((shape, index) => {
      const { id, type, ...props } = shape
      const isSelected = selectedIds.includes(id)

      return React.createElement(type, {
        key: id,
        id,
        draggable: !transformerMode,
        stroke: isSelected ? '#000' : undefined,
        strokeWidth: isSelected ? 4 : undefined,
        onClick: e => handleShapeClick(e, transformerMode),
        onDragEnd: e => handleShapeDragEnd(e, index),
        onTransformEnd: e => handleTransformEnd(e, index),
        onDragStart: (evt: Konva.KonvaEventObject<DragEvent>) => {
          // 取消冒泡
          evt.cancelBubble = true
        },
        ...props
      }) as React.ReactElement
    })
  }

  return (
    <div className='view-wrapper'>
      <div>selectedId: {selectedIds.join(', ')}</div>
      <div>Mode: {transformerMode ? '变形模式' : '普通模式'}</div>
      <div>快捷键: Ctrl+Alt+T(变形) | Enter(确认) | Esc(取消) | Shift+点击(多选)</div>

      <Stage ref={stageRef} width={800} height={600} onClick={handleStageClick}>
        <Layer ref={layerRef}>
          <Group ref={groupRef} draggable onDragStart={handleGroupDragStart}>
            <Rect visible={transformerMode} width={800} height={600} fill='rgba(0, 0, 0, 0.1)' />
            {shapesElements()}
          </Group>
          <Transformer
            visible={transformerMode}
            ref={transformerRef}
            boundBoxFunc={(oldBox, newBox) => {
              // 限制最小尺寸
              if (newBox.width < 5 || newBox.height < 5) {
                return oldBox
              }
              return newBox
            }}
          />
        </Layer>
      </Stage>
    </div>
  )
}
